<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    script src='/js/vue.js'></script>
    <div id='app'>

        <!-- v-for 实现了页面的列表的渲染 语法是 item in items，items是原数组，item是数组中的组成成员或元素别名 -->
        <!-- v-for 数组 -->
        <!-- <ul>
            <li>{{books[0]}}</li>
            <li>{{books[1]}}</li>
            <li>{{books[2]}}</li>
            <li>{{books[3]}}</li>
        </ul> -->
        <!-- 无下标循环 -->
        <ul>
            <li v-for="item in books">{{item}}</li>
        </ul>

        <!-- 有下标循环 -->
        <ul>
            <li v-for="(item,index) in books">{{index+1}}.{{item}}</li>
        </ul>


        <!-- v-for 对象循环 -->
        <ul>
            <li v-for="item in persions">{{value}}</li>
        </ul>

        <ul>
            <li v-for="(item,key) in books">{{key}}.{{value}}</li>
        </ul>

        <ul>
            <li v-for="(item,key,index) in books">{{index+1}},{{key}}.{{value}}</li>
        </ul>

        <!-- 循环的嵌套 多维结构 -->
        <ul v-for="items in persion">
            <li v-for="(value,key,index) in items">{{index+1}}{{item}}</li>
        </ul>

    </div>
    <script>
       let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                books:['三国演义','西游记','红楼梦','水浒传'],
                persions:{
                    name:'shane',
                    age:12,
                    aender:'男'
                },

                persion:{
                    1:{
                        name:'zhang',
                        age:12,
                        aender:'男'
                    },
                    2:{
                        name:'lisi',
                        age:16,
                        aender:'男'
                    },
                    3:{
                        name:'wang',
                        age:15,
                        aender:'女'
                    },
                    
                }

            }
        })
    </script>
</body>
</html>